<template>
  <div id="app">
    <MusicTitle v-if="$route.meta.showNav"></MusicTitle>
    <nav v-if="$route.meta.showNav">
      <li><router-link to="/" >推荐音乐</router-link></li>
      <li><router-link to="/hot">热歌榜</router-link></li>
      <li><router-link to="/search">搜索</router-link></li>
    </nav>
    <router-view
      @update:currentSong="currentSong = $event"
      :style="{ marginBottom: '60px' }"
      :currentSong="currentSong"
      :playing="playing"
      @update:currentPlayList="currentPlayList = $event"
    />
    <audio
      :src="
        currentSong
          ? `https://music.163.com/song/media/outer/url?id=${currentSong.id}.mp3`
          : ''
      "
      controls
      autoplay
      style="height: 50px; position: fixed; top: 50px; display: none"
      ref="audio"
      @play="playing = true"
      @pause="playing = false"
      @timeupdate="currentTime = $event.target.currentTime"
      @durationchange="duration = $event.target.duration"
      @ended="nextSong()"
    ></audio>
    <CustomPlay
      :currentSong="currentSong"
      :playing="playing"
      :currentTime="currentTime"
      :duration="duration"
      @audio-play-handler="$refs.audio.play()"
      @audio-pause-handler="$refs.audio.pause()"
      @update:currentTime="$refs.audio.currentTime = $event"
      :currentPlayList="currentPlayList"
      @update:currentSong="currentSong = $event"
      @prev-song="prevSong"
      @next-song="nextSong"
    ></CustomPlay>
  </div>
</template>

<script>
import CustomPlay from "./components/CustomPlay.vue";
import MusicTitle from "./components/MusicTitle.vue";
export default {
  components: { MusicTitle, CustomPlay },
  data() {
    return {
      currentSong: null,
      playing: false,
      currentTime: 0,
      duration: 0,
      currentPlayList: [],
    };
  },
  methods: {
    prevSong: function () {
      var currentIndex = this.currentPlayList.findIndex((o) => {
        return o.id === this.currentSong.id;
      });
      var index =
        currentIndex === 0 ? this.currentPlayList.length - 1 : currentIndex - 1;
      this.currentSong = this.currentPlayList[index];
    },


    nextSong: function () {
      // 上路6行和下面6行一样，但是上面的会报错
      
      // var currentIndex = this.currentPLayList.findIndex((o) => {
        //   return o.id === this.currentSong.id;
      // });
      // var index =
      //   currentIndex === this.currentPLayList.length - 1 ? 0 : currentIndex + 1;
      // this.currentSong = this.currentPLayList[index];

      var currentIndex = this.currentPlayList.findIndex((o) => {
        return o.id === this.currentSong.id;
      });
      var index =
        currentIndex === this.currentPlayList.length - 1 ? 0 : currentIndex + 1;
      this.currentSong = this.currentPlayList[index];
    },
  },
  watch: {
    currentPlayList: function (n) {
      this.currentSong = n[0];
    },
  },
};
</script>

<style lang="less">
 @import "@/assets/font/iconfont.css";
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
body {
  margin: 0;
}
nav {
  display: flex;
  box-shadow: 0 -2px 0 0 rgb(216, 216, 216) inset;
  li {
    flex: 1;
    list-style: none;
    text-align: center;
    a {
      font-weight: 400;
      color: #333;
      text-decoration: none;
      padding: 10px 5px;
      display: inline-block;
      font-size: 15px;
      &.router-link-exact-active {
        color: #dd001b;
        border-bottom: 2px solid #dd001b;
      }
    }
  }
}
</style>
